<template>
  <div class="div-container">
    <div class="div-container" ref="historyChart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import moment from "moment";

export default {
    props:['siloResult'],
    data(){
        return{
            // series:undefined,
            option:undefined,
            historyChart:undefined,
            // thisSiloResult:undefined,
        }
    },
    watch:{
        siloResult:{
            deep:true,
            handler(newValue){
                this.initChart();
            }
        }
    },
    mounted(){
    },
    beforeDestroy(){
        if(this.historyChart){
            this.historyChart.dispose();
            this.historyChart = null;
        }
    },
    methods:{
        initChart(){
            // console.log("??????",this.siloResult)
            if(!this.siloResult) return;
            var dateAxis = [];
            var minAxis = [];
            var levAxis = [];
            var maxAxis = [];
            this.siloResult.forEach(item => {
                dateAxis.push(moment(item.createTime).format("YYYY-MM-DD HH:mm:ss").substring(11));
                minAxis.push(item.linerMin)
                levAxis.push(item.linerLev)
                maxAxis.push(item.linerMax)
            });

            if(this.historyChart){
                this.option.xAxis.data = dateAxis;
                this.option.series[0].data = minAxis;
                this.option.series[1].data = levAxis;
                this.option.series[2].data = maxAxis;
            }else{
                this.option = {
                    legend:{
                        show:true,
                        data:["最小值","平均值","最大值"],
                        itemWidth: 10, 
                        itemHeight: 6,
                        textStyle:{
                            fontSize:10,
                            color:'#fff'
                        } 
                    },
                    tooltip:{
                        trigger: 'axis',
                    },
                    xAxis: {
                        type: 'category',
                        data: dateAxis,
                        boundaryGap: false,
                        nameTextStyle:{
                            color:'#fff'
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#fff'
                            },
                        },
                        axisLabel:{
                            textStyle:{
                                color:'#fff'
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        nameTextStyle:{
                            color:'#fff'
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#fff'
                            },
                        },
                        axisLabel:{
                            textStyle:{
                                color:'#fff'
                            }
                        },
                        splitLine:{
                            show:false
                        }
                    },
                    grid: {
                        left: '0.5%',   // 距离容器左边缘的距离
                        right: '1%',  // 距离容器右边缘的距离
                        top: '10%',    // 距离容器上边缘的距离
                        bottom: '0',  // 距离容器下边缘的距离
                        containLabel :true,
                    },
                    series: [
                        {
                            name:"最小值",
                            data: minAxis,
                            type: 'line',
                            smooth: true,
                            showSymbol: false,
                        },
                        {
                            name:"平均值",
                            data: levAxis,
                            type: 'line',
                            smooth: true,
                            showSymbol: false,
                        },
                        {
                            name:"最大值",
                            data: maxAxis,
                            type: 'line',
                            smooth: true,
                            showSymbol: false,
                        },
                    ]
                };
                this.historyChart = echarts.init(this.$refs.historyChart);
            }
            this.historyChart.setOption(this.option,true);
        },
        historyChartResize(){
            if(this.historyChart) {
                this.historyChart.resize()
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .div-container{
        width: 100%;
        height: 100%;
    }
</style>